<template>
	<view class="my">
		<!-- S 顶部栏 -->
		<sol-navbar :is-back="false">
			<template v-slot:default>
				<view class="my-naver__left" v-if="false">
					<text class="my-naver__left-text line-1">花轮先生花轮先生花轮先生花轮先生</text>
				</view>
			</template>
		</sol-navbar>
		<!-- E 顶部栏 -->

		<!-- 用户信息 S -->
		<view class="my-info">
			<view class="my-info__left">
				<view class="my-info__left-user">
					<text class="my-info__left-user__name line-1">花轮先生花轮先生花轮先生花轮先生</text>
					<image class="my-info__left-user__gender" src="/static/icon-default/icon_male.png"
						mode="scaleToFill">
					</image>
				</view>
				<view class="my-info__left-banner" @click="fnNavigateToPage('open-vip')">
					<text class="my-info__left-banner__vip">VIP</text>
					<text class="my-info__left-banner__text line-1">查看会员权益</text>
				</view>
				<view class="my-info__left-option">
					<image class="my-info__left-option__icon" src="/static/icon-default/icon_wallet.png"
						mode="scaleToFill" @click="fnNavigateToPage('wallet')">
					</image>
					<image class="my-info__left-option__icon" src="/static/icon-default/icon_setup.png"
						mode="scaleToFill" @click="fnNavigateToPage('setup')">
					</image>
				</view>
			</view>
			<view class="my-info__right">
				<sol-avatar src="https://dummyimage.com/200x200" :size="200"></sol-avatar>
			</view>
		</view>
		<!-- 用户信息 S -->

		<!-- 频道数据 S -->
		<view class="my-data">
			<view class="my-data__item">
				<text class="my-data__item-num">56</text>
				<text class="my-data__item-text">新增粉丝</text>
			</view>
			<view class="my-data__item" @click="fnNavigateToPage('fans')">
				<text class="my-data__item-num">5096</text>
				<text class="my-data__item-text">累计粉丝</text>
			</view>
			<view class="my-data__item">
				<text class="my-data__item-num">94</text>
				<text class="my-data__item-text">我的订阅</text>
			</view>
		</view>
		<!-- 频道数据 S -->

		<!-- 我的内容 S -->
		<text class="my-content">我的内容 · 63篇</text>
		<view class="my-list">
			<dynamic-list-item v-for="dynaminc in dynamicList" :key="dynaminc.id" :info="dynaminc"
				@click="fnDynamincEvent">
			</dynamic-list-item>
		</view>
		<!-- 我的内容 E -->

		<!-- S 内容发布 -->
		<view class="my-publish" @click="fnNavigateToPage('publish')">
			<image class="my-publish_icon" src="/static/icon-default/icon_edit.png" mode="scaleToFill"></image>
			<text class="my-publish_text">我要发布</text>
		</view>
		<!-- E 内容发布 -->

		<!-- 底部导航 S -->
		<sol-tabbar :show-text="false" :list="vuex_tabbar"></sol-tabbar>
		<!-- 底部导航 E -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		encodeParam
	} from "@/utils/function/codeParam.js"

	export default {
		name: "TabbarMy",
		data() {
			return {
				// 动态列表
				dynamicList: Array.from({
					length: 32
				}, (v, i) => v = {
					id: i + 12,
					publishTime: `18时${i+10}分`,
					publishState: ["weather-night", "weather-rainy"][i % 2],
					content: "多数事并不如你想的那样一帆风顺，但你却因此成为了可以乘风破浪的人。" + i,
					user: {
						uid: 10,
						nickname: '凉凉',
						avatar: 'https://dummyimage.com/200x200',
					},
					imgs: i == 8 ? [] : ['/static/icon-default/icon_alipay.png',
						'https://dummyimage.com/200x200', '/static/icon-default/icon_logo.png', ,
						'https://dummyimage.com/200x200'
					].slice(0, i % 6),
					lifeTime: i + "小时",
					lifeState: "time-" + (i % 6 + 1),
					commentCount: Math.random().toString().slice(-3),
					audioTime: i == 8 ? 46 : 0,
					audioSrc: i == 8 ? '/staic/88s.aco' : null,
					type: 'dynamic',
					users: [],
				}),
			}
		},
		computed: {
			...mapState(['vuex_tabbar']),
		},
		created() {},
		mounted() {
			console.log(1);
		},
		methods: {
			// 跳转页面
			fnNavigateToPage(type) {
				let url = null;
				switch (type) {
					case "setup": // 设置
						url = '/pages/setup/index/index';
						break;
					case "open-vip": // 开通会员
						url = '/pages/user/open-vip/open-vip';
						break;
					case "wallet": // 我的钱包
						url = '/pages/user/wallet/wallet';
						break;
					case "fans": // 我的粉丝
						url = '/pages/user/fans/fans';
						break;
					case "publish": // 发布动态
						url = '/pages/dynamic/publish/publish';
					default:
						break;
				}
				// 携带参数跳转
				console.log('fnNavigateToPage=> ', url);
				if (!url) return 0;
				uni.navigateTo({
					url
				})
			},
			// 动态列表事件
			fnDynamincEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
			}
		},

	}
</script>

<style lang="scss">
	.my {
		background-color: $--color-background;
		min-height: 90vh;
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		overflow: hidden;

		// 顶部栏
		&-naver {
			&__left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-left: 28rpx;

				&-text {
					font-size: 42rpx;
					font-weight: bold;
					letter-spacing: 4rpx;
					color: #DDDDDD;
					max-width: 64%;
				}
			}
		}

		// 用户信息
		&-info {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			padding-left: 28rpx;
			padding-right: 28rpx;
			padding-bottom: 80rpx;

			&__left {
				&-user {
					display: flex;
					align-items: center;

					&__name {
						width: 420rpx;
						font-size: 48rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #DDDDDD;
						display: block;
					}

					&__gender {
						width: 34rpx;
						height: 34rpx;
						display: block;
					}
				}

				&-banner {
					display: flex;
					align-items: center;
					width: 300rpx;
					background-image: linear-gradient(to right, rgb(72, 78, 84) 0%, rgb(98, 93, 70) 100%);
					border-radius: 14rpx;
					padding: 15rpx 20rpx;
					margin-top: 30rpx;
					margin-bottom: 40rpx;

					&__vip {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						font-style: italic;
						color: #f2bf2f;
					}

					&__text {
						width: 200rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F2BF2F;
						display: block;
						margin-left: 20rpx;
					}
				}

				&-option {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					&__icon {
						width: 88rpx;
						height: 64rpx;
						display: block;
						background-color: #474e54;
						margin-right: 20rpx;
						border-radius: 28rpx;
					}
				}
			}

			&__right {}
		}

		// 频道数据
		&-data {
			margin-left: 28rpx;
			margin-right: 28rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			background-color: $--color-block;
			border-radius: 24rpx;

			&__item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx;

				&-num {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #BCBEC0;
					line-height: 80rpx;
				}

				&-text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #878787;
					line-height: 48rpx;
				}
			}
		}

		// 我的内容
		&-content {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #DDDDDD;
			padding-left: 28rpx;
			padding-top: 48rpx;
			padding-bottom: 28rpx;
			display: block;
		}

		&-list {
			padding: 0 28rpx;
		}

		// 悬浮按钮
		&-publish {
			position: fixed;
			bottom: 172rpx;
			bottom: calc(172rpx + env(safe-area-inset-bottom));
			right: 32rpx;
			background: #474e54;
			padding: 28rpx 32rpx;
			border-radius: 48rpx;
			box-shadow: 0 4rpx 14rpx 0 #576069;
			display: inline-flex;

			&_icon {
				width: 42rpx;
				height: 42rpx;
			}

			&_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #DDDDDD;
				letter-spacing: 4rpx;
				margin-left: 18rpx;
			}
		}
	}
</style>
